<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas 基础</title>
<style type="text/css">
#canvas{border: 1px solid #ccc;}
</style>
</head>
<body>
   <canvas id="canvas" width="600" height="400">
      <p>Your browserdoes not support the canvas element.</p>  
   </canvas>
</body>
<script type="text/javascript">
window.onload = function() {
   var canvas =document.getElementById("canvas");
   var context2D =canvas.getContext("2d");

   //载入图片
   var pic = new Image();
   pic.src ="http://i.mmcdn.cn/simba/img/TB1AJ0NGpXXXXX_aXXXSutbFXXX.jpg";
   pic.onload=function(){
      // alert(222);
      context2D.drawImage(pic,500,0);
   }

   //写字符串
   context2D.font ="35px Times New Roman";
   context2D.fillText("HelloCanvas!", 20, canvas.height / 2);//fillText(text, left,top, [maxWidth]);1.内容，2.定位左，3.定位右

   //canvas路径绘制
   //绘制相交的线段
   context2D.beginPath();
   context2D.moveTo(50,50);
   context2D.lineTo(100,100);
   context2D.moveTo(200,50);
   context2D.lineTo(100,100);
   context2D.stroke();

   //绘制与这两条线段相切的红色圆弧
   context2D.beginPath();
   context2D.strokeStyle= "#ff0000";
   context2D.moveTo(50,50);
   context2D.arcTo(100,100, 200, 50, 100);
   context2D.stroke();

   //绘制一个蓝色的圆
   context2D.beginPath();
   context2D.strokeStyle= "#0000ff";
   context2D.arc(300,250, 100, 0, Math.PI * 2, false);
   context2D.stroke();
   //将上面的圆填充为灰色
   context2D.fillStyle ="#a3a3a3";
   context2D.fill();

   //在上面的圆中剪辑一个圆形方形区域
   context2D.beginPath();
   context2D.rect(250,200, 100, 100);
   context2D.clip();
   //在剪辑区域中填充一个大于该区域尺寸的矩形
   context2D.fillStyle ="yellow";
   context2D.fillRect(0,0, 400, 400);

}
</script>
</html>